<!--
 * @Descripttion: 呼叫设置
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-08-05 14:18:34
 * @LastEditors: GW
 * @LastEditTime: 2022-06-02 10:23:07
-->
<template>
    <div class="content-wrapper a-base-container">
        <div class="requisition-set-wrapper call-left-box">
            <h3>外呼基础设置</h3>
            <a-row >
                <div >
                    <a-col class="call-volume-staup">
                        <a-col class="staup-name">
                            外呼方式
                        </a-col> 
                         <a-col style="display: ruby;">
                           <a-radio-group v-model="settings.callWay" style="margin-top:8px">
                               <!-- 亿维盒子 -->
                                <a-radio value="box"> 
                                    盒子
                                </a-radio>
                                <!-- <a-radio value="line">
                                    线路
                                </a-radio> -->
                                <a-radio value="callBack">
                                    点击回拨
                                </a-radio>
                            </a-radio-group>
                        </a-col> 
                    </a-col> 
                </div>  
            </a-row>
            <div v-show="settings.callWay == 'box'">
                <h3>音量设置</h3>
                <a-row >
                    <div class="call-volume">
                        <a-col class="call-volume-list">
                            <a-col class="volume-name">
                                本地听到音量
                            </a-col> 
                            <a-col class="volume-hr">
                                <a-slider v-model="settings.localaudio"  />
                            </a-col> 
                            <a-col> 
                                {{settings.localaudio}}
                            </a-col>
                        </a-col> 
                        <a-col class="call-volume-list ">
                            <a-col class="volume-name">
                                对方听到音量
                            </a-col> 
                            <a-col class="volume-hr">
                                <a-slider v-model="settings.phoneaudio" />
                            </a-col> 
                            <a-cal>
                                {{settings.phoneaudio}}
                            </a-cal> 
                        </a-col>
                    </div>  
                </a-row>

                <h3>换卡设置</h3>
                <a-row >
                    <div >
                        <a-col class="call-volume-staup">
                            <a-col class="staup-name">
                                自动换卡
                            </a-col> 
                            <a-col >
                                <a-checkbox v-model="settings.isAutoChangeSIM" @change="onCheckboxChange($event,'isAutoChangeSIM')">
                                开启
                                </a-checkbox>
                            </a-col> 
                            <a-cal >
                                拨打次数
                                <a-input v-model="settings.maxCallTimes" placeholder="录入" type="number" class="setup-input-frisht"/>
                            </a-cal> 
                        </a-col> 
                    </div>  
                </a-row>
            </div>
            <div class="submit_div">
                <a-button type="primary" @click="batchSave" class="submit_btn">保存</a-button>
            </div>
        </div>
       
    </div>
</template>

<script>
import { list,batchSave} from "@/api/crm/call/callSettings";


export default {
    data(){
        //基础设置
        const baseSettingsList = [
            {
                className:"音量设置",       //分类
                code:"localaudio",
                value:"50",
                dataType: 1,        //数据类型 1：数字 2：字符串 3.Boolean
                showName:"本地听到音量"
            },
            {
                className:"音量设置",       //分类
                code:"phoneaudio",
                value:"50",
                dataType: 1,        //数据类型 1：数字 2：字符串 3.Boolean
                showName:"对方听到音量"
            },
            {
                className:"换卡设置",       //分类
                code:"isAutoChangeSIM",
                value:"true",
                dataType: 3,        //数据类型 1：数字 2：字符串 3.Boolean
                showName:"是否自动换卡"
            },
            {
                className:"换卡设置",       //分类
                code:"maxCallTimes",
                value:"5",
                dataType: 1,        //数据类型 1：数字 2：字符串 3.Boolean
                showName:"换卡频率"
            },
            {
                className:"外呼基础设置",       //分类
                code:"callWay",
                value:"line",
                dataType: 2,        //数据类型 1：数字 2：字符串 3.Boolean
                showName:"外呼方式"
            },
            
        ];
        return {
            baseSettingsList,
            settingsMap: new Map(),
            settings:{},
        }
    },
    created(){
        this.list();
    },
    activated(){
        this.list();
    },
    methods: {
        onCheckboxChange(e,key){
            this.settings[key] = e.target.checked;
            console.log("onCheckboxChange",  e.target.checked,this.settings);
        },
        //查询 设置
        list(){
           list().then(response => {
                console.log("获取呼叫设置", response);
                if (response.code === 200) {
                    let settings = {};
                    let settingsMap = new Map();
                    let newSettingsMap = new Map();
                    let { data } = response;
                    data && data.forEach(item=>item.code && newSettingsMap.set(item.code,item));
                    let newBaseSettingsList =JSON.parse(JSON.stringify(this.baseSettingsList));
                    console.log("newBaseSettingsList",newBaseSettingsList)
                    newBaseSettingsList.forEach(item=>{
                        let setting = newSettingsMap.get(item.code);
                        console.log("查找设置",item.code,setting);
                        if(setting){
                            Object.assign(item,{...setting});
                        }
                        settingsMap.set(item.code,item);
                        let value = item.value;
                        if(item.dataType == 1){
                            value = Number(value);
                        }else if(item.dataType == 3){
                            value = Boolean(value == "true");
                        }
                        settings[item.code] = value;
                    });
                    console.log("保存外呼设置，最终结果",settings);
                    this.localaudio = settings.localaudio;
                    this.phoneaudio = settings.phoneaudio;
                    this.settings = settings;
                    this.settingsMap = settingsMap;
                    
                }
            }).catch(error => { });
        },
        //批量保存
        batchSave(){
            let {settings,settingsMap} = this;
            console.log("批量保存",JSON.stringify(settings),)
            let postData = [];
            for (const key in settings) {
                let item = settingsMap.get(key);
                if(item){
                    item.value = settings[key];
                    postData.push(item);
                }
            }
            if(postData.length == 0){
                this.$message.error("保存失败,请求参数错误");
                return;
            }
            batchSave(postData).then(response => {
                if (response.code === 200) {
                    this.$message.success("保存成功");
                    this.list();
                    this.$store.dispatch("ListCallSettings");   //获取外呼设置
                }else{
                    this.$message.error("保存失败");
                }
            }).catch(error => { });
        }
    }
}

</script>
<style lang="less">
    @import '~@/style/purchase/voucher.less';
    .call-left-box {
        width: 50%;
        h3 {
            margin-left: 20px;
            margin-top: 20px;
        }
        .submit_div{
                margin-left:auto;
            .submit_btn{
                margin-right: 20px;
                margin-top: 10px;
            }
        }
    }

    // 音量
    .call-volume {
        display: flex;
        background: #EEEEEE;
        width: 95%;
        margin: auto;
        border-radius: 4px;
    }
    .call-volume-list {
        display: flex;
        width: 40%;
        height: 40px;
        line-height: 40px;
        margin-left: 30px;

    }
    .volume-name {
        width: 33%;
    }
    .volume-hr {
        width: 60%;
        padding: 0 10px 0 0;
    }


    .volune-orer {
        height: 40px;
        line-height: 40px;
    }

    .call-volume-staup {
        background: #EEEEEE;
        display: flex; 
        width: 95%;
        margin: auto;
        height: 40px;
        line-height: 40px;
        border-radius: 4px;

        .staup-name {
            margin: 0 10px 0 30px;
        }

      
    }

    .setup-input-second {
        border: 1px solid #CACDD0 !important;
        width: 150px;
    }


    .setup-input-frisht {
        border: 1px solid #CACDD0 !important;
        width: 100px;
        margin-right: 20px;
    }
</style>
